<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据</title>
    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/weuix.css"/>
    <script src="../js/zepto.min.js"></script>
    <script src="../js/zepto.weui.js"></script>
    <script src="../js/iscroll-lite.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



    <style>
       
       .top {
           background-color: #027aff;
      
           height: 320px;
           /* background-color: pink; */
           position: relative;
          
       }

    



       .weui-tab .weui-navbar {
           background-color: #027aff;
           
       }

       .weui-navbar__item {
           font-size: 16px;
           color: #fff;
    
       }
       .weui-navbar__item.tab-blue {
            background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
            border-bottom: 3px solid #fff;
            color: #fff;
        }

         


        .weui-header .weui-header-title, .weui-header h1{
            margin: 0 98px;
            margin-top: 14px;
        }

        .weui-header-left {
            margin-top: 6px;
            
        }

        
       .weui-navbar__item  {
            padding: 0px 0 13px 0;
        }




        /* datetime */

        .datetime {
            position: absolute;
            position: absolute;
            padding-left: 7px;
            top: 13px;
            right: 30px;
            box-sizing: border-box;
            width: 95px;
            margin-top: 100px;
            color: #fff;
            background-color: #0051aa;
            border-radius: 18px;
            height: 29px;

        }

        .datetime span {
            font-size: 12px;
            border-radius: 16px;
            padding: 2px 6px;
 

        }

        .span_active {
            background-color: #79ade6;
        }



        /* 排行头三个区域 */

        .great_show {
           /* background-color: pink; */
           height: 180px;
           box-sizing: border-box;
           width: 87%;
           margin: 0 auto;
           overflow: hidden;
           margin-top: 18px;
           background: url("/img/data_tab_bg.png") no-repeat;
           background-size: 100%;
       }

       


      .top .weui-flex {
          margin-top: 50px;

          height: 130px;
          /* background-color: rgba(255, 192, 203, 0.363); */
          z-index: 9999;
      }

      .great_show .weui-avatar-circle {
          margin: 0 auto;
      }

      .great_show .weui-avatar-circle img {
          height: 60px;
          width: 60px;
      }

      .great_show .weui-avatar-circle i {
        display: block;
        /* background-color: #399cff; */
        color: #fff;
        position: absolute;
        top: 40px;
        left: -7px;
        font-size: 10px;
        text-align: center;
        margin: 0 auto;
        height: 28px;
        width: 72px;
        background: url(/img/avatar_ico.png) no-repeat;
        background-size: contain;
        line-height: 32px;
        
      }

      .great_show .first {
            position: relative;
            top: -10px;

      }

      .great_show .first img {
            width: 66px ;
            height: 66px ;
      }

      .great_show .first i {
        display: block;
        /* background-color: #399cff; */
        color: #fff;
        position: absolute;
        top: 41px;
        left: -12px;
        font-size: 13px;
        text-align: center;
        margin: 0 auto;
        height: 30px;
        width: 89px;
        background: url(/img/avatar_ico.png) no-repeat;
        background-size: 100%;
        line-height: 40px;
      }

      .great_show .name_money {
          margin: 0 auto;
          /* background-color: #fff; */
          text-align: center;
          margin-top: 20px;
          width: 94px;
      }

      .great_show .nickname{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
      }

      .great_show .money {
          color: #399cff;
      }



           /* 底部 */

           .bottom {
          background-color: #f3f3f3;
      }

      body {
          background-color: #f3f3f3;
      }
      .bottom p {
          display: inline-block;
      }


      .bottom p i {
          font-size: 20px;
          margin-right: 20px;
          margin-left: 20px;
      }

      .bottom .weui-cell__ft {
          position: absolute;
          right: 20px;
          color: black;
      }


      .bottom .weui-cells {
        margin-top: 0;
      }

      .bottom .weui-cell {
          background-color: #fff;
          padding: 20px 0;
 
      }

      .bottom img {
          height: 60px;
          width: 60px;
      }


      .bottom span {
          margin-left: 20px;
          /* background-color: pink; */
          width: 140px;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap
      }



      /* 平台实时数据 */
        /* 问卷信息数据显示 */
        .oa_data {
            position: absolute;
            top: 110px;
            height: 600px;
            width: 100%;

        }

        .oa_data_cell {
            box-sizing: border-box;
            height: 200px;
            background-color: #fff;
            margin: 10px 0;
            box-shadow: 0px -15px #f3f3f3;
            /*background-color: pink;*/


        }

        .oa_data_cell span {
            display: inline-block;
            width: 18px;
            background-color: #027aff;
            height: 34px;
        }
        .oa_data_cell h3 {
            display: inline-block;
            line-height: 34px;
        }

        .oa_data_cell_title {
            border-left: solid 18px #027aff;
            height: 34px;
            width: 100%;
            overflow: hidden;
        }

        .count {
            text-align: center;
            margin-top: 50px;
        }

        .oa_data_cell_title h3 {
            font-weight: 400;
            margin-left: 6px;
        }

        body {
            width: 100%;
            overflow: hidden;
            /*background-color: pink;*/

        }

        .main {
            background-color: yellow;
        }



        [v-clock]{
            display: none;
        }

     
     
    </style>

</head>
<body>






    <div class="top">
            <div class="weui-header"> 
                    <div class="weui-header-left"> <a class="icon icon-109 f-white" th:href='@{/admin/return_management_page(admin_token=${adminToken})}'> &nbsp;&nbsp;返回</a>  </div>
                     <h1 class="weui-header-title">数据</h1>
            </div>
      <!-- tab -->
        <div class="weui-tab" id="t3" style="height:44px;">
            <div class="weui-navbar">
                        
                   
                <div class="weui-navbar__item "  id="question">
                    萌问榜
                </div>
    
               
               

                <div class="weui-navbar__item" id="answer">
                        趣答榜
                    </div>

                <div class="weui-navbar__item" id="other_data">
                        其他数据
                    </div>
                
            </div>

        </div>
    
       <!-- 前三展示 -->
    <div class="great_show" id="great_show">
            <div  class="weui-flex" >
                    <div  v-for="top in top3" class="weui-flex__item">
                        <div class="placeholder">
                            <div class="weui-avatar-circle">
                                <img :src="top.data.imgurl">

                                <i>{{ top.title }}</i>

                            </div>
                            <div class="name_money">
                                <div class="nickname">{{ top.data.nickname }}</div>
                                <div class="money"><span>￥</span>{{ top.data.money }}</div>
                            </div>
                        </div>
                    </div>

            </div>
 </div>




    <!-- 时间 -->
    <div class="datetime" id="datetime">
            <span>月</span>
            <span class="span_active">周</span>
            <span>日</span>
    </div>






           
    </div>




    <!-- 底部列表 -->
    <div class="bottom" id="bottom">

            <div class="weui-cells">
                    <div v-for="bottom in bottomdata" class="weui-cell">
                            <p>
                                <i>{{bottom.data.rank}}</i>
                                <div class="weui-avatar-circle ">
                        <img :src="bottom.data.imgurl">
                                    
                                    </div>
                               <span>{{bottom.data.nickname}}</span>
                            </p>
                


                        <div class="weui-cell__ft">￥{{bottom.data.money}}</div>
                    </div>

            
                </div>
            



    </div>




    <div class="oa_data " id="oa_data">
        <div v-for="realTimeData in realTimeDatas" class="user_count oa_data_cell">
            <div class="oa_data_cell_title">
                <h3>{{ realTimeData.title }}</h3>
            </div>
            <div class="count">
                <h1> {{ realTimeData.data }}</h1>
            </div>
        </div>

    </div>














    <script>
        $(
            function () {



                // 进入页面渲染数据：
                $.ajax({
                    type: "POST",
                    url: "/admin/get_all_data/0",
                    data: {},
                    dataType: "json",
                    success: function (data) {
                        data.isSelected = false;
                        var app = new Vue({
                            el: '#oa_data',
                            data: {
                                realTimeDatas: [
                                    { data: data.realTimeData.realTimePersonCount, title:'平台实时人数' },
                                    { data: data.realTimeData.realTimeTotalQuestionCount, title:'平台总共问卷数量' },
                                    { data: data.realTimeData.realTimeQuestionCount, title:'平台实时问卷数量' },

                                ]
                            }
                        })



                    },
                    error: function (result) {
                        alert(result)
                    }
                });


                // 页面跳转：
                var spans = $(".datetime span");
                for (var i = 0; i < spans.length; i++) {
                    var that = spans[i];
                    $(that).click(
                        function () {
                            $(this).addClass("span_active")
                            $(this).siblings().removeClass('span_active');
                        }
                    )
                }

                $('#t3').tab({
                    defaultIndex: 2,
                    activeClass: 'tab-blue'
                })

                $("#datetime").hide()
                $("#great_show").hide()
                $("#bottom").hide()

                // 点击让一些板块消失
                $("#other_data").click(
                    function () {

                        $("#datetime").hide()
                        $("#great_show").hide()
                        $("#bottom").hide()
                        $("#oa_data").show()
                    }
                )


                $("#question").click(


                    function () {


                        $.ajax({
                            type: "POST",
                            url: "/admin/get_all_data/2",
                            data: {},
                            dataType: "json",
                            success: function (data) {

                                var app = new Vue({
                                    el: '#great_show',
                                    data: {
                                        top3: [
                                            { data: data.charts[1], title:'NO.2' },
                                            { data: data.charts[0], title:'NO.1' },
                                            { data: data.charts[2], title:'NO.3' },

                                        ]
                                    }
                                })



                                var app2 = new Vue({
                                    el: '#bottom',
                                    data: {
                                        bottomdata: [
                                            { data: data.charts[3], index: 4 },
                                            { data: data.charts[4], index: 5 },
                                            { data: data.charts[5], index: 6 },
                                            { data: data.charts[6], index: 7 },
                                            { data: data.charts[7], index: 8 },
                                            { data: data.charts[8], index: 9 },
                                            { data: data.charts[9], index: 10 },

                                        ]
                                    },
                                    methods:{update () {
                                        alert(this == $("#bottom"))
                                            this.$forceUpdate();
                                            alert('9999')

                                        }}
                                })

                                app2.$forceUpdate




                            },
                            error: function (result) {
                                alert(result)
                            }
                        });
                        $("#datetime").show()
                        $("#great_show").show()
                        $("#bottom").show()
                        $("#oa_data").hide()
                    }
                )

                $("#answer").click(

                    function () {
                        $.ajax({
                            type: "POST",
                            url: "/admin/get_all_data/1",
                            data: {},
                            dataType: "json",
                            success: function (data) {
                                data.isSelected = false;
                                var app = new Vue({
                                    el: '#great_show',
                                    data: {
                                        top3: [
                                            { data: data.charts[1], title:'NO.2' },
                                            { data: data.charts[0], title:'NO.1' },
                                            { data: data.charts[2], title:'NO.3' },

                                        ]
                                    },
                                    methods:{function () {
                                            this.nextTick(function () {
                                                alert('可以了')
                                            })
                                        this.$forceUpdate();
                                    }}
                                })

                                var app2 = new Vue({
                                    el: '#bottom',
                                    data: {
                                        bottomdata: [
                                            { data: data.charts[3], index: 4 },
                                            { data: data.charts[4], index: 5 },
                                            { data: data.charts[5], index: 6 },
                                            { data: data.charts[6], index: 7 },
                                            { data: data.charts[7], index: 8 },
                                            { data: data.charts[8], index: 9 },
                                            { data: data.charts[9], index: 10 },

                                        ]
                                    }
                                })

                            },
                            error: function (result) {
                                alert(result)
                            }
                        });
                        $("#oa_data").hide()
                        $("#datetime").show()
                        $("#great_show").show()
                        $("#bottom").show()

                    }
                )


            })

    </script>
</body>
</html>